<style lang="less">
  @import './answer.less';
</style>
<template>
  <div class="answer-flex" id="answer">
		<header class="answer-header">
			<div class="answer-progress">
				<div class="answer-progress-bar" :style="{width: currentIndex/data.tests.length * 100 + '%'}">

				</div>
			</div>
			{{currentIndex}}/{{data.tests.length}}
			<div class="answer-time">
				<!-- <img src="../../images/stop.png"/> -->
				{{time}}
			</div>
		</header>
			<article class="answer-article">
				<span>
					<img src="../../images/what.png"/>
					[单选题]
				</span>
				<hr />
        <!-- 单选 -->
				<ol v-if="currentIndex < 11">
					<li>
						1
						<p class="answer-question">
							在结构化语言中
						</p>
					</li>
					<li>
            <div class="" style="padding-left: 15px;">
              <input class="magic-radio" type="radio" name='baoxou' value="A" id="one-radio"  v-model="radioResult">
              <label for="one-radio" style="line-height: 2em;">阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀</label>
            </div>
					</li>
          <li>
            <div class="" style="padding-left: 15px;">
              <input class="magic-radio" type="radio" name='baoxou' value="B" id="two-radio" v-model="radioResult">
              <label for="two-radio" style="line-height: 2em;">阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀</label>
            </div>
					</li>
          <li>
            <div class="" style="padding-left: 15px;">
              <input class="magic-radio" type="radio" name='baoxou' value="C" id="three-radio" v-model="radioResult">
              <label for="three-radio" style="line-height: 2em;">阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀</label>
            </div>
					</li>
          <li>
            <div class="" style="padding-left: 15px;">
              <input class="magic-radio" type="radio" name='baoxou' value="D" id="four-radio" v-model="radioResult">
              <label for="four-radio" style="line-height: 2em;">阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀</label>
            </div>
					</li>
				</ol>
        <!-- 多选 -->
        <ol v-if="currentIndex > 10">
					<li>
						1
						<p class="answer-question">
							在结构化语言中
						</p>
					</li>
					<li>
            <div class="" style="padding-left: 15px;">
              <input class="magic-checkbox" type="checkbox" value="A" id="one-checkbox" v-model="checkResult">
              <label for="one-checkbox" style="line-height: 2em;">阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀</label>
            </div>
					</li>
          <li>
            <div class="" style="padding-left: 15px;">
              <input class="magic-checkbox" type="checkbox" value="B" id="two-checkbox" v-model="checkResult">
              <label for="two-checkbox" style="line-height: 2em;">阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀</label>
            </div>
					</li>
          <li>
            <div class="" style="padding-left: 15px;">
              <input class="magic-checkbox" type="checkbox" value="C" id="three-checkbox" v-model="checkResult">
              <label for="three-checkbox" style="line-height: 2em;">阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀</label>
            </div>
					</li>
          <li>
            <div class="" style="padding-left: 15px;">
              <input class="magic-checkbox" type="checkbox" value="D" id="four-checkbox" v-model="checkResult">
              <label for="four-checkbox" style="line-height: 2em;">阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀啊手动阀手动阀</label>
            </div>
					</li>
				</ol>
				<div class="answer-btns">
					<button class="answer-btn" @click="beforFinish()">提前交卷</button>
					<button class="answer-btn" @click="nextQus()" v-show="currentIndex !== questions">下一题</button>
				</div>
			</article>
			<footer class="answer-footer">
				<a href="#" v-for="(q, index) in data.tests.length" :class="{active: index === currentIndex - 1}" @click="selected(index)">{{index + 1}}</a>
			</footer>
		</div>
</template>

<script>
export default {
  name: 'answer',
  data () {
    return {
      questions: 100,
      currentIndex: 1,
      checkResult: [], // 答案
      radioResult: '',
      timer: null,
      time: '60:00',
      data: {},
    };
  },
  mounted () {
    this.timer = setInterval(this.CountDown(60 * 60), 1000);
    this.testaddTest()
  },
  methods: {
    // 下一题
    nextQus () {
      // 进度加1，下一题准备
      this.currentIndex += 1;
    },
    // 选中某一个题目，注意选中的为真是下标，需要加1
    selected (index) {
      this.currentIndex = index + 1;
    },
    // 提前交卷
    beforFinish () {
      this.$Modal.confirm({
        title: '交卷提醒',
        content: '提前交卷前，请先仔细检查！',
        onOk: () => {
          this.$router.replace({
            name: 'score'
          });
        },
        onCancel: () => {
          console.log('取消提前交卷');
        }
      });
    },
    CountDown (maxtime) {
      let time = maxtime;
      this.timer = setInterval(() => {
        if (time >= 0) {
          let minutes = Math.floor(time / 60);
          let seconds = Math.floor(time % 60);
          // let msg = '距离结束还有' + minutes + '分' + seconds + '秒';
          // if (maxtime === 5 * 60)alert('还剩5分钟');
          this.time = `${minutes < 10 ? 0 : ''}${minutes}:${seconds < 10 ? 0 : ''}${seconds}`;
          --time;
        } else {
          clearInterval(this.this);
          console.log('时间到，停止答题');
        }
      }, 1000);
    },
    testaddTest () {

    },
    setTest(data) {
      this.data = data
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.setTest(to.params)
    })
  },
};
</script>

<style lang="css">
</style>
